<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<h2>多级联动</h2>

<select name="" id="one">
    <option value="">请选择一级分类</option>
    {foreach $category as $val}
    <option value="{$val.id}">{$val.cate_name}</option>
    {/foreach}
</select>
<select name="" id="two">
    <option value="">请选择二级分类</option>
</select>
<select name="" id="three">
    <option value="">请选择三级分类</option>
</select>
<script>
    $("#one").change(function () {
        let p_id = $(this).val();
        // 发送ajax请求
        $.ajax({
            url:"/getChildCategory",
            data:{p_id:p_id},
            dataType:"json",
            type:"POST",
            success:function (response) {
                // js 循环 for each
                let str = '';
                $.each(response.data,function (i,v) {
                    str +=  '<option value="' + v.id +'">' + v.cate_name+ '</option>'
                });
                $("#two").html("<option value=''>请选择二级分类</option>");
                $("#two").append(str);
            }

        })
    })
</script>
</body>
</html>